<!DOCTYPE html>
<html>
<head>
    <title>编写简单的css代码</title>
</head>
<body style="background:black;">
   <style>
       div,p{color:pink;text-align:center;}
       .font_color{
           text-decoration:overline;
           }
           .font_color2{
           text-decoration:line-through;
           }
           .font_color3{
           text-decoration:underline;
           }
           .font_color5 a{
           text-decoration:none;
           }
           .font-h{width:150px;}
           .font-z{letter-spacing: 3px;}
           .font-d{letter-spacing: 3px;}
           .font-s{text-indent:2em;text-align:left;}
           .font-dx{text-transform:uppercase;}
           .font-dxs{text-transform:capitalize;}
           .font-dxx{text-transform:lowercase;}
           .kbg1{white-space: normal;text-align:left;}
           .kbg2{white-space: pre;text-align:left;}
           .kbg3{white-space: pre-wrap;text-align:left;}
           .kbg4{white-space: nowrap;text-align:left;}
   </style>
   
   <div class="font_color">字体颜色,上划线</div>
   <div class="font_color2">删除效果</div>
   <div class="font_color3">下划线</div>
   <div class="font_color5"><a href="/" >超链接</a>去掉下划线效果</div>
   <p class="font-h">行间距
    行间距
    行间距
    行间距
   </p>
   <p class="font-z">字符间距</p>
   <p class="font-d">单词间距 富强 民主 爱国</p>
   <p class="font-s">有缩进效果的一段文字有缩进效果的一段文字有缩进效果的一段文字有缩进效果的一段文字有缩进效果的一段文字</p>
   <p class="font-dx">abcdefg</p>
   <p class="font-dxs">abcdefg english</p>
   <p class="font-dxx">abcdefg</p>

   <p class="kbg1">abcd efg hi  jg</p>
   <p class="kbg2">abcd efg hi  jg     sdf            23</p>
   <p class="kbg3">abcd efg hi  jg 超出容器换行</p>
   <p class="kbg4">abcd efg hi  jg有<br>才会换 行</p>
</body>
</html>